<!--
 * @FileDescription 循迹菜单
 * @Author lz
 * @Date 20230224 14:32:07
 * @LastEditors lz
 * @LastEditTime 20230224 14:32:07
-->
<template>
    <div class="install_wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="2" :ID="0" v-if="HomeContent.Default.ApoType.value == false"></hdrModel>
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value.FaultPointCollection"> -->
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value"> -->
        <div class="times" v-if="HomeContent.Default.FaultPoints.value">
            <span>00:{{ formattedMinutes }}:{{ formattedSeconds }}</span>  
        </div>
        <div class="Btn" @click="submit()" v-if="HomeContent.Default.ModeType.value == 3">
            提交
        </div>
        <!-- 列表 -->
        <installList></installList>
        <!-- 视角导航 -->
        <perspectiveList v-if="HomeContent.Default.ApoType.value == false"></perspectiveList>
        <!-- 教学辅助 -->
        <!-- <teachingAids></teachingAids> -->
        <apollol v-show="HomeContent.Default.ApoType.value == true"></apollol>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import apollol from '@components/Apps/Simulation/ApolloImitate/index.vue'
import { computed, onMounted, ref, watch } from 'vue';
import hdrModel from '../header/index.vue'
import { useRouter } from 'vue-router'
import HomeContent from '../HomeContent';
import installList from '../TrackMenu/model/installList.vue'
import perspectiveList from '../TrackMenu/model/perspectiveList.vue'
import teachingAids from '../TrackMenu/model/teachingAids.vue'
const router = useRouter()
async function again() {
    let Id = []
    Id = await AssetLoaderComponent.Default.LoadAllAsync(HomeContent.Default.MenuList.value.Asset);
    console.log(Id, '模型回调ID');
    //存贮Id
    HomeContent.Default.ResourceID.value = Id
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithSendInstanceIDRequest(Id))
    HomeContent.Default.ProgressText.value = '资源初始化'
    HomeContent.Default.ProgressVal.value = 75
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '场景初始化'
        HomeContent.Default.ProgressVal.value = 55
    }, 400);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 45
    }, 600);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 25
    }, 800);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载完成'
        HomeContent.Default.ProgressVal.value = 0
    }, 1000);
    setTimeout(async () => {
        HomeContent.Default.Loaded.value = false
    }, 1200);
}




// ============================================================================================
// 倒计时
// console.log("HomeContent.Default.Duration.value", HomeContent.Default.Duration.value);

const remainingTime = ref(HomeContent.Default.Duration.value * 1000);
// const remainingTime = ref(0.1 * 60 * 1000);

// let timer: any = null;
function startCountdown() {
  HomeContent.Default.timerControl.value = setInterval(() => {
    remainingTime.value -= 1000;
    if (remainingTime.value <= 0) {
      // 模拟一次点击提交
      submit();
      clearInterval(HomeContent.Default.timerControl.value);
      HomeContent.Default.timerControl.value = null;
    }
  }, 1000);
}
const formattedMinutes = computed(() => {
  const minutes = Math.floor(remainingTime.value / 60000);
  return minutes.toString().padStart(2, "0");
});

const formattedSeconds = computed(() => {
  const seconds = Math.floor((remainingTime.value % 60000) / 1000);
  return seconds.toString().padStart(2, "0");
});
// ===================================================================================================

//提交
function submit() {
    let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrainingAppraiseRequest())
    newArr.then((res) => {
        console.log(res, '提交返回值');
        HomeContent.Default.ScoreDetails.value = res
        router.push('summaryPage')
    })
}

//监听屏幕点击
watch(() => HomeContent.Default.PMUBANTU.value, async (newVal, oldVal) => {
    if (newVal != oldVal) {
        // router.push('ApolloImitate')
        HomeContent.Default.ApoType.value = true
        setTimeout(async () => {
            await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackShowApolloRequest(true))
        }, 300);
    }
})

onMounted(function () {
    again()
    startCountdown()
});
</script>

<style scoped>
.times {
    position: absolute;
    left: 69%;
    top: 18px;
    float: left;
    line-height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-right: 10px;
}
.install_wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.Btn {
    position: absolute;
    left: 75%;
    top: 16px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/images/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -7px;
    margin-right: 10px;
}

.Btn:hover {
    color: #fff;
    background-image: url('/images/btn_bg_select.png');
}
</style>